<template>
    <div class="mgtIdNumber">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">{{pageTitle}}</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <div class="mgtIdNumber_inputDiv">
            <x-input class="base-input_font" v-model="idNumber" :max="StrLenth.idNumberMax" placeholder="请输入投保人或被保险人证件号码">
                <img slot="label" style="padding-right:10px;display:block;" src="~assets/x3/ico/icon-card.png" width="18">
            </x-input>
            <x-input class="base-input_font" v-show="!isPay" v-model="policyNo" :max="24" placeholder="保单号 ( 选填 )">
                <img slot="label" style="padding-right:10px;display:block;" src="~assets/x3/ico/icon_bd.png" width="18">
            </x-input>
            <x-input class="base-input_font" type="tel" v-show="!isPay" v-model="mobile" :max="StrLenth.mobile" placeholder="请输入投保人或被保险人手机号码">
                <img slot="label" style="padding-right:10px;display:block;" src="~assets/x3/ico/icon-dh.png" width="18">
            </x-input>
            <x-input class="base-input_font" v-model="imgCode" :max="StrLenth.img" placeholder="请输入图形验证码">
                <img slot="label" style="padding-right:10px;padding-top:5px;display:block;" src="~assets/x3/ico/ico-input-img_code.png" width="18">
                <span slot="right" class="img__code--change" @click="changeImgCode()">换一张</span>
                <img slot="right" class="img__code" :src="imgCodeSrc" @click="changeImgCode()">
            </x-input>
            <x-input class="base-input_font" v-show="!isPay" type="tel" :max="StrLenth.sms" v-model="mobileCode" placeholder="请输入短信验证码">
                <img slot="label" style="padding-right:10px;padding-top:5px;display:block;" src="~assets/x3/ico/ico-input-Mcode.png" width="18">
                <x-button action-type="button" slot="right" mini class="linkMobileCode" @click.native="sendSmsCode" :text="sendBtnText" :disabled="isSendOk"></x-button>
            </x-input>
        </div>
        <div class="mgtIdNumber_errorMsg" v-show="haveError">
            <badge text="!"></badge> {{errorMessage}}
        </div>
        <x-button text="查询" @click.native="processForm" type="primary" class="mgtIdNumber_process_btn"></x-button>
    </div>
</template>
<script>
import { XHeader, XInput, XButton, Badge, Alert, AlertPlugin, Confirm } from "vux";
import { RouteUrl, Mutations, StrLenth, FooterShow, BaseService } from "src/common/const";
import Validation from "src/common/util/validation";
import { RequestUrl } from "src/common/url";
import { mapState } from "vuex";

export default {
    components: { XHeader, XInput, XButton, Badge, Alert, AlertPlugin, Confirm },
    computed: mapState(["user", "isWeChar", "order"]),
    data() {
        return {
            StrLenth: {}, //字符长度常量
            idNumber: "", //身份证号
            policyNo: "",
            mobile: "",//手机号
            mobileCode: "", //验证码
            isSendOk: false, //发送按钮是否禁用
            sendBtnText: "获取验证码", //发送按钮文本内容
            haveError: false, //是否显示错误
            errorMessage: "", //错误信息

            imgCodeSrc: RequestUrl.GET_VALIDATE_CODE, //验证码图片路径
            imgCode: "", //图形码
            // haveIdNumber: false //是否已绑定身份证
            isPay: false,
            pageTitle: "保单查询认证"
        };
    },
    methods: {
        //返回
        goBack() {
            if (this.$common.isEmpty(sessionStorage["SERVICE_GOBACK_URL"])) {
                this.$common.goBackUrl(this, RouteUrl.SERVICE);
            } else {
                this.$common.goBackUrl(this, sessionStorage["SERVICE_GOBACK_URL"]);
            }
            // this.$common.goBackUrl(this, RouteUrl.SERVICE);
            // this.$common.goBack(this);
        },
        changeImgCode() {
            this.imgCodeSrc = RequestUrl.GET_VALIDATE_CODE + "?a=" + Math.random();
        },
        // 发送验证码
        sendSmsCode() {
            /**
             * 发送验证码,返回data.msg=信息,data.state=0表示成功
             * isSendOk,true=禁用(disabled=true)
             * sendBtnText,验证码按钮文本显示内容
             */
            //校验-图形码
            let msg = Validation.isImgCode(this.imgCode);
            if (msg != null) {
                this.errorMessage = msg;
                this.haveError = true;
                return;
            }
            this.$common.sendSMS(this, this.mobile, this.imgCode, this.isSendOk, this.pageTitle);
        },
        //提交
        processForm() {
            let userDto = this.user.userDto;
            let baseService = localStorage["ID_CAR_MENU_BASE_SERVICE"];
            if (Validation.isEmpty(this.idNumber)) {
                this.errorMessage = "请输入证件号码";
                this.haveError = true;
                return;
            }
            // _this.$common.storeCommit(_this, Mutations.QUERY_POLICYS_SERVICE, dataQuery);
            //校验-身份证号码
            // if (!Validation.isIdNumber(this.idNumber)) {
            //     this.errorMessage = "请输入有效的身份证号码";
            //     this.haveError = true;
            //     return;
            // }
            //校验-图形码
            let msg = Validation.isImgCode(this.imgCode);
            if (msg != null) {
                this.errorMessage = msg;
                this.haveError = true;
                return;
            }
            if (baseService != BaseService.PAY) {
                //校验-手机验证码
                msg = Validation.isSmsCode(this.mobileCode);
                if (msg != null) {
                    this.errorMessage = msg;
                    this.haveError = true;
                    return;
                }
                //校验-手机号
                msg = Validation.isPhone11(this.mobile);
                if (msg != null) {
                    this.errorMessage = msg;
                    this.haveError = true;
                    return;
                }
            }

            this.haveError = false;
            this.errorMessage = "";
            //提交操作
            let userCode = "";
            if (this.user.isLogin) {
                userCode = this.user.userDto.userCode;
            }
            // if(typeof(this.order.menu.baseService)=="undefined"){
            //     baseService = 
            // }
            let data = { _this: this, id: this.idNumber, imgCode: this.imgCode, verCode: this.mobileCode, mobileNo: this.mobile, type: false, policyNo: this.policyNo, baseService: baseService, userCode: userCode }
            this.$common.storeCommit(this, Mutations.QUERY_POLICYS_SERVICE, data);
            // if (this.order.menu.baseService == BaseService.CLAIM_QUERY || this.order.menu.baseService == BaseService.CLAIM_UPLOAD) {
            //     this.$common.storeCommit(this, Mutations.QUERY_POLICYS_SERVICE, data);
            // } else if (this.order.menu.baseService == BaseService.PAY) {
            //     this.$common.storeCommit(this, Mutations.QUERY_POLICYS_SERVICE, data);
            //     // this.$common.storeCommit(this, Mutations.GET_PAY_DATA, this);
            //     // this.$common.storeCommit(this, Mutations.QUERY_POLICYS_SERVICE, data);
            // }
            // else {
            //     this.$common.storeCommit(this, Mutations.CLEAN_PRP_CMAIN_LIST, data);
            //     this.$common.storeCommit(this, Mutations.QUERY_POLICYS_SERVICE, data);
            // }
        },
        //初始化当前页面信息
        initPage() {
            //清除验证码倒计时
            this.$common.clearTimeOutForSms();
        },
        setServiceType() {
            let type = this.$common.getUrlKey("service_type");
            let menu = {
                baseService: "",
            };
            let isType = false;
            if (type == "s_dzbd") {
                isType = true;
                localStorage["ID_CAR_MENU_BASE_SERVICE"] = BaseService.POLICY;
                menu.baseService = BaseService.POLICY;
            } else if (type == "s_dzfp") {
                isType = true;
                localStorage["ID_CAR_MENU_BASE_SERVICE"] = BaseService.INVOICE;
                menu.baseService = BaseService.INVOICE;
            } else if (type == "s_msba") {
                isType = true;
                localStorage["ID_CAR_MENU_BASE_SERVICE"] = BaseService.FNOL;
                menu.baseService = BaseService.FNOL;
            } else if (type == "s_lpcx") {
                isType = true;
                localStorage["ID_CAR_MENU_BASE_SERVICE"] = BaseService.CLAIM_QUERY;
                menu.baseService = BaseService.CLAIM_QUERY;
            }
            if (isType) {
                this.$common.storeCommit(this, Mutations.SET_MENU, menu);
            }
        }
    },
    mounted() {
        // this.$init.subPageInit(this);
        if (typeof (this.order.menu.baseService) != "undefined" && this.order.menu.baseService != "undefined" && this.order.menu.baseService != "" && this.order.menu.baseService != null) {
            localStorage["ID_CAR_MENU_BASE_SERVICE"] = this.order.menu.baseService;
        }
        if (localStorage["ID_CAR_MENU_BASE_SERVICE"] == BaseService.PAY) {
            this.isPay = true;
            this.pageTitle = "缴费查询";
        }
        document.title = this.pageTitle;
        // localStorage["POLICY_FROM_PATH"] = from.path;
        this.StrLenth = StrLenth; //字符长度常量
        //初始化当前页面信息
        this.initPage();
        this.$init.subPageInit(this);
        this.setServiceType();
    }
};
</script>
<style lang="scss" scoped>
//input区域
.mgtIdNumber_inputDiv {
  margin: 15px auto;
  width: 95%;
  height: auto;
  border-radius: 5px;
  background-color: white;
  span {
    font-size: 14px;
  }
  .weui-cell {
    border-top: 1px solid #efefef;
  }
  .weui-cell:before {
    border-top: 0px;
  }
}

//图形码
.img__code {
  width: 80px;
  height: 31px;
  margin-left: 3px;
  vertical-align: middle;
}

//换一张图形码
.img__code--change {
  margin-left: 3px;
  vertical-align: middle;
  font-size: 14px;
}

//获取验证码按钮
.linkMobileCode {
  padding: 0px;
  width: 80px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #C8161D;
  border: 1px solid #C8161D;
  background-color: white;
}

//提交按钮
.mgtIdNumber_process_btn {
  width: 95%;
  font-size: 20px;
}

//错误信息
.mgtIdNumber_errorMsg {
  color: red;
  font-size: 14px;
  margin-left: 10px;
  height: 36px;
}

//弹窗信息
.weui-dialog__bd {
  height: 30px;
  line-height: 30px;
}

//修改默认按钮失效时背景颜色
.weui-btn_disabled.weui-btn_primary {
  background-color: #cfcfcf;
}
</style>
